<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息</title>
    <!-- 引入样式 -->
    <link rel="shortcut icon" href="../../../images/favicon.ico">
    <link rel="stylesheet" href="../../../plugins/element-ui/index.css">
    <link rel="stylesheet" href="../../../styles/common.css"/>
    <link rel="stylesheet" href="../../../styles/page.css"/>
    <link rel="stylesheet" href="../../../styles/bttn.min.css"/>
    <link rel="stylesheet" href="../../../styles/indexF.css"/>
    <style>
        #activity-app .notAdmin::after {
            border: 0 !important;


        }
    </style>
    <style>
        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 200px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }

        .my-label {
            width: 200px;
            height: 140px;
        }

        .my-content {
            width: 500px;
        }
    </style>
</head>
<body style="background-color: #ffffff">
<div class="dashboard-container" id="activity-app" >
    <el-header>
        <el-menu :default-active="defAct" mode="horizontal" style="margin-left: 50px">
            <el-menu-item index="1">
                <div style="margin-right: 20px">
                    <img src="../../../images/front.webp" style="width: 283.8px;height: 60px">
                </div>
            </el-menu-item>
            <el-menu-item
                    v-for="item in menuList"
                    :index="item.id"
                    :key="item.id"
                    @click="menuHandle(item)"
                    style="margin-left: 80px"
            >
                <span slot="title" style="font-size: 30px" >{{item.name}}</span>
            </el-menu-item>
            <el-menu-item style="margin-left: 30px">
                <el-button icon="el-icon-switch-button" round @click="logout()">
                    <span style="font-size: 20px">
                        注销
                    </span>
                </el-button>
            </el-menu-item>
        </el-menu>
    </el-header>
    <div class="container">
        <el-descriptions class="margin-top" :column="1" :size="size" border>
            <el-descriptions-item label-class-name="my-label" content-class-name="my-content">
                <div slot="label" style="text-align: center">
                    <span style="font-size: 35px;font-weight: bolder;text-align: center">
                        学号
                    </span>
                </div>
                <div style="font-size: 40px;font-weight: bolder;color: black;text-align: center">
                    {{this.stuNum}}
                </div>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="my-content">
                <div slot="label" style="text-align: center">
                    <span style="font-size: 35px;font-weight: bolder;text-align: center">
                    姓名
                    </span>
                </div>
                <div style="font-size: 40px;font-weight: bolder;color: black;text-align: center">
                    {{this.vname}}
                </div>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="my-content">
                <div slot="label" style="text-align: center">
                    <span style="font-size: 35px;font-weight: bolder;text-align: center">
                    手机号
                    </span>
                </div>
                <div style="font-size: 40px;font-weight: bolder;color: black;text-align: center">
                    {{this.pho}}
                </div>
            </el-descriptions-item>
            <el-descriptions-item label-class-name="my-label" content-class-name="my-content">
                <div slot="label" style="text-align: center">
                    <span style="font-size: 35px;font-weight: bolder;text-align: center">
                    志愿时长
                    </span>
                </div>
                <div style="font-size: 40px;font-weight: bolder;color: black;text-align: center">
                    {{this.time}} 小时 <br/>
                </div>
                <div style="font-size: 20px;text-align: center;color: #d4d1c6">
                    (如有异议请联系管理员)
                </div>
            </el-descriptions-item>
        </el-descriptions>
    </div>
    <el-footer>
        <div style="margin-left: 700px;font-size: 20px;color: black;font-weight: bolder">
            xupt@04204006
        </div>
    </el-footer>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../../plugins/axios/axios.min.js"></script>
<script src="../../../js/request.js"></script>
<script src="../../../api/volunteer.js"></script>
<script>
    new Vue({
        el: '#activity-app',
        data() {
            return {
                size: '',
                stuNum: '',
                vname: '',
                pho: '',
                time: '',

                defAct: '4',
                menuList: [
                    {
                        id: '2',
                        name: '活动首页',
                        //activity————————————————————————————————————————————————————————member
                        url: 'list.html',
                        icon: 'icon-member'
                    },
                    {
                        id: '3',
                        name: '我的活动',
                        url: 'ownList.html',
                        icon: 'icon-category'
                    },
                    {
                        id: '4',
                        name: '账号信息',
                        url: 'info.html',
                        icon: 'icon-category'
                    },
                ],
                //activity————————————————————————————————————————————————————————member
                iframeUrl: 'page/volunteerCenter/list.html',
                loading: false,
                timer: null,
            }
        },
        computed: {},
        created() {
            if (window.localStorage.getItem('userInfo') === null) {
                window.location.href = '../../login/loginFront.html'
            }
            this.userId = JSON.parse(localStorage.getItem('userInfo')).id
            this.init()
        },
        mounted() {
        },
        methods: {
            async init() {
                await getVolunteer(this.userId).then(res => {
                    if (String(res.code) === '1') {
                        console.log(res.data)
                        this.stuNum = res.data.volunteerStunum;
                        this.vname = res.data.volunteerName
                        this.pho = res.data.volunteerPho
                        this.time = res.data.volunteerTime
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },
            logout() {
                logoutApi().then((res) => {
                    if (res.code === 1) {
                        localStorage.removeItem('userInfo')
                        window.location.href = '../../login/loginFront.html'
                    }
                })
            },
            menuHandle(item) {
                this.loading = true
                this.menuActived = item.id
                this.iframeUrl = item.url
                window.location.href = item.url
                this.closeLoading()
            },
            closeLoading() {
                this.timer = null
                this.timer = setTimeout(() => {
                    this.loading = false
                }, 1000)
            },

        }
    })
</script>
</body>
</html>